import 'package:flutter/material.dart';

import 'create_new.dart';

main() => runApp(const MyApp());

TextEditingController elementText = TextEditingController();
String text = '';

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        debugShowCheckedModeBanner: false, home: CFDHomePage());
  }
}

class CFDHomePage extends StatelessWidget {
  const CFDHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var buttonShape = const RoundedRectangleBorder(
        side: BorderSide(width: 1),
        borderRadius: BorderRadius.all(Radius.circular(8)));
    var buttonTextStyle = const TextStyle(color: Colors.white);
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Row(
          children: const [
            Text('Wonder', style: TextStyle(color: Colors.black))
          ],
        ),
        actions: [
          Row(children: [
            MaterialButton(
                color: Colors.black,
                shape: buttonShape,
                child: Text("AI Avatars", style: buttonTextStyle),
                onPressed: () {}),
            const SizedBox(
              width: 10,
            ),
            MaterialButton(
                color: Colors.black,
                shape: buttonShape,
                child: Text(
                  "Pro",
                  style: buttonTextStyle,
                ),
                onPressed: () {}),

            const SizedBox(
              width: 10,
            ),

            Image.asset('images/default.jpeg', width: 30, height: 30),
            const SizedBox(
              width: 10,
            ),
            // MaterialButton(
            //     child: const SizedBox(
            //         width: 20,
            //         height: 20,
            //         child: Placeholder(
            //           color: Colors.grey,
            //           strokeWidth: 2,
            //         )),
            //     onPressed: () {})
          ])
        ],
      ),
      body: const CFDHomeContent(),
    );
  }
}

class CFDHomeContent extends StatelessWidget {
  const CFDHomeContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var placeHolder =
        Image.asset('images/default.jpeg', height: 100, width: 100);
    SizedBox gap = const SizedBox(
      width: 10,
    );

    // TextEditingController elementText = TextEditingController();
    return ListView(
      padding: const EdgeInsets.all(10),
      children: <Widget>[
        const CFDTextFieldWidget(),
        Container(
            padding: const EdgeInsets.only(top: 10),
            child: Column(children: [
              Row(
                children: const [
                  Text('选择'),
                  SizedBox(
                    width: 10,
                  ),
                  Text('风格')
                ],
              ),
              const SizedBox(height: 10),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(children: [
                  placeHolder,
                  gap,
                  placeHolder,
                  gap,
                  placeHolder,
                  gap,
                  placeHolder
                ]),
              )
            ])),
        const SizedBox(height: 10),
        const CreateNewButton(),
        const SizedBox(height: 10),
        Image.asset('images/default_2.jpg'),
        // const SizedBox(
        //     height: 150,
        //     child: Placeholder(
        //       color: Colors.grey,
        //       strokeWidth: 5,
        //     )),
        const SizedBox(height: 10),
        Row(
          children: const [
            Text('提示'),
            SizedBox(
              width: 10,
            ),
            Text('灵感')
          ],
        ),
        const SizedBox(height: 10),
        Column(
          children: const [
            RowItem(),
            RowItem(),
            RowItem(),
            RowItem(),
          ],
        )
      ],
    );
  }
}

class CreateNewButton extends StatefulWidget {
  const CreateNewButton({super.key});

  @override
  State<CreateNewButton> createState() => _CreateNewButtonState();
}

class _CreateNewButtonState extends State<CreateNewButton> {
  @override
  Widget build(BuildContext context) {
    return MaterialButton(
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(20))),
        height: 60,
        color: Colors.black,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const SizedBox(
                width: 10,
                height: 10,
                child: Placeholder(color: Colors.white, strokeWidth: 1)),
            Column(
              children: const [
                Text('创建', style: TextStyle(color: Colors.white)),
                Text('观看广告', style: TextStyle(color: Colors.grey, fontSize: 10))
              ],
            ),
            const SizedBox(
                width: 10,
                height: 10,
                child: Placeholder(color: Colors.white, strokeWidth: 1)),
          ],
        ),
        onPressed: () {
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => CreateNew(inputFeature: text)));
        });
  }
}

class CFDTextFieldWidget extends StatefulWidget {
  const CFDTextFieldWidget({super.key});

  @override
  State<StatefulWidget> createState() => _CFDTextFieldWidgetState();
}

class _CFDTextFieldWidgetState extends State<CFDTextFieldWidget> {
  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: elementText,
      decoration: const InputDecoration(
        border: OutlineInputBorder(),
        hintText: '请输入关键字',
      ),
    );
  }

  // @override
  // void dispose() {
  //   text = elementText.text;
  //   elementText.dispose();
  //   super.dispose();
  // }
}

class RowItem extends StatelessWidget {
  const RowItem({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: const EdgeInsets.only(bottom: 10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            SizedBox(
                width: 180,
                height: 200,
                child: Image.asset('images/default_3.jpeg')),
            SizedBox(
                width: 180, height: 200, child: Image.asset('images/kun.jpeg'))
          ],
        ));
  }
}
